<template>
  <div id="ArticleTypeList">
    <!-- 表格 -->
    <el-table border stripe class="el-table" :data="typeData">
      <el-table-column prop="id" label="id" align="center"></el-table-column>
      <el-table-column prop="name" label="类型名称" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button @click="currentType = scope.row; typeEditShow = true;" type="primary"
            icon="el-icon-edit"></el-button>
          <el-button @click="currentType = scope.row; typeDeleteShow = true;" type="primary"
            icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <div id="paging">
      <el-pagination layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="pageCurrentChange">
      </el-pagination>
    </div>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="typeDeleteShow" width="30%">
      <span>确定删除该文章类型么</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="typeDeleteShow = false;">取 消</el-button>
        <el-button type="primary" @click="deleteType(); typeDeleteShow = false;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑提示框 -->
    <el-dialog title="编辑文章类型" :visible.sync="typeEditShow" width="30%">
      <el-form :model="currentType" label-position="top">
        <el-form-item>
          <span>id：{{ currentType.id }}</span>
        </el-form-item>
        <el-form-item label="url">
          <el-input v-model="currentType.name" type="input" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="typeEditShow = false;">取 消</el-button>
        <el-button type="primary" @click="editType(); typeEditShow = false;">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeData: [], // 文章类型数据
      currentType: {}, // 当前文章类型
      typeEditShow: false, // 控制编辑提示框的显示/隐藏
      typeDeleteShow: false, // 控制删除提示框的显示/隐藏
      currentPage: 1, // 当前页
      pageSize: 10, // 页大小
      total: 0, // 总数据数
      searchOrNot: false, // 是否搜索状态量，用于确定翻页后数据从那个方法得到
    }
  },
  methods: {
    // 获取所有文章类型数据
    getAllTypeData() {
      // 请求获取文章类型数据
      this.$axios({
        method: 'post',
        url: '/type/login/getAllType/' + this.currentPage + '/' + this.pageSize,
        headers: { // 设置请求头，不然收不到参数！
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        this.typeData = res.data.data.data
        this.total = res.data.data.total
      })
    },
    // 翻页事件
    pageCurrentChange(val) {
      this.currentPage = val // 更改当前页
      if (this.searchOrNot) { // 若搜索过，就用筛选搜索的方式查询数据
        this.search(false)
        return
      }
      this.getAllResourceData()
    },
    // 删除资源
    deleteType() {
      this.$axios({
        method: 'post',
        url: '/type/login/deleteType/' + this.currentType.id
      }).then(res => {
        if (res.data) {
          this.$router.go(0)
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
          })
        } else {
          this.$message({
            message: '删除失败！出现错误了X.X',
            type: 'error',
            showClose: true,
          })
        }
      })
    },
    // 编辑类型事件
    editType() {
      let data = new FormData()
      data.append('id', this.currentType.id)
      data.append('name', this.currentType.name)
      this.$axios({
        method: 'post',
        url: '/type/login/updateType',
        data: data,
        headers: { // 设置请求头，不然收不到参数！
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        if (res.data) {
          this.$router.go(0)
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
          })
        } else {
          this.$message({
            message: '删除失败！出现错误了X.X',
            type: 'error',
            showClose: true,
          })
        }
      })
    }
  },
  mounted() {
    this.getAllTypeData()
  },
}
</script>

<style scoped="scoped">
/* 表格 */
.el-table {
  width: 80%;
  margin: 0 auto;
  border-radius: 20px;
}

.el-table__row {
  background-color: rgba(0, 0, 0, 0);
}

/deep/.el-table--border {
  border-color: #464646;
}

/deep/.el-table th.el-table__cell.is-leaf {
  border-color: #464646;
}

/deep/ .el-table thead tr>th {
  background-color: #202020 !important;
  color: #464646;
  border-color: #464646;
}

/deep/ .el-table tbody tr>td {
  background-color: #202020 !important;
  border-color: #464646;
}

/deep/.el-table::before,
/deep/.el-table__fixed-right::before {
  background-color: rgba(0, 0, 0, 0);
}

/deep/.el-table__empty-block {
    background-color: #202020;
}
/deep/.el-table__body-wrapper {
    border-bottom: 1px solid;
}
/* 分页 */

/deep/.el-pagination {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  color: #202020;
}

/deep/.el-pagination button {
  color: #fff;
  background-color: #202020;
}

/deep/ .el-pager li.active {
  color: rgb(255, 150, 50);
}

/deep/ .number {
  color: #fff;
}

/deep/ .number:hover {
  color: rgb(255, 150, 50);
}

/deep/.el-pager li {
  background-color: #202020;
}
</style>